<template>
	<view>
		<cu-custom bgColor="bg-gradual-red" :isBack="false">
			<block slot="content">个人中心</block>
		</cu-custom>
		<!-- 个人信息 -->
		<view class="cu-list menu-avatar">
			<view class="cu-item">
				<view :class="loginFlag ? '':'cuIcon-profile'" class="cu-avatar lg round lgmargin-left" :style="loginFlag&&`background-image: url(${oUser.userInfo.avatarUrl})`">
				</view>
				<view class="content" v-if="loginFlag">
					<view class="text-grey user-title">{{oUser.userInfo.nickName || 'xxx'}}</view>
				</view>
				<!-- <view class="action" v-if="loginFlag">
					<view class='cu-tag light round bg-green' v-if="false">已认证</view>
					<view class='cu-tag light round bg-gray' v-else>未认证</view>
				</view> -->
				<view class="content" v-else>
					<button open-type="getUserInfo" @getuserinfo="userInfoHandler" class="cu-btn bg-green round">
						点击授权
					</button>
				</view>
			</view>
		</view>


		<!-- grid -->
		<view class="cu-list grid col-3">
			<view class="cu-item">
				<navigator url="/pages/user/list?id=0" open-type="navigate">
					<view class="user-title">
						{{oUser.aJoin.length || 0}}<text class="grid-danwei">个</text>
					</view>
					<text>参加活动</text>
				</navigator>
			</view>
			<view class="cu-item" @tap="toRegSheet">

				<!-- <navigator url="/pages/home/reg" open-type="navigate"> -->
				<view class="user-title">
					{{count}}<text class="grid-danwei">个</text>
				</view>
				<text>发起活动</text>
				<!-- </navigator> -->
			</view>
			<view class="cu-item">
				<view class="user-title">
					{{oUser.integral || 0}}<text class="grid-danwei">分</text>
				</view>
				<text>我的积分</text>
			</view>
		</view>

		<!-- 列表 -->
		<view class="cu-list menu sm-border margin-top">

	<!-- 		<view class="cu-item arrow">
				<navigator class="content" hover-class="none" url="/pages/index/index" open-type="redirect">
					<text class="cuIcon-discoverfill text-orange"></text>
					<text class="text-grey">积分管理</text>
				</navigator>
			</view> -->


			<!-- <view class="cu-item arrow">
				<button class="cu-btn content" @tap="versionManage">
					<text class="cuIcon-fork text-orange"></text>
					<text class="text-grey">版本管理</text>
				</button>
			</view> -->
			<view class="cu-item arrow">
				<navigator class="content" hover-class="none" url="/pages/user/about" open-type="navigate">
					<text class="cuIcon-link text-orange"></text>
					<text class="text-grey">关于我们</text>
				</navigator>
			</view>
			
		</view>
		
		
		<view class="cu-modal" :class="loginFlag?'':'show'">
			<view class="cu-dialog">
				<view class="cu-bar text-center justify-center">
					为了您的安全起见，需要您手动授权验证
				</view>
				<button open-type="getUserInfo" @getuserinfo="userInfoHandler" class="cu-btn bg-green round margin-sm">
					点击授权
				</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	const {
		request
	} = require('@/utils/t-request.js');
	// import {
	// 	mapMutations,
	// 	mapState,
	// 	mapActions,
	// 	mapGetters
	// } from 'vuex';
	export default {
		data() {
			return {
				oUser: {},
				count: 0,
			}
		},
		computed: {
			// ...mapState('userModule', ['userInfo']),
			loginFlag: {
				// getter
				get: function(state) {
					if (Object.keys(this.oUser).length) {
						return true
					} else {
						return false
					}
				},
				// setter
				set: function(newValue) {

				}
			}
		},
		methods: {
			// ...mapMutations('userModule', ['changeInfo']),
			versionManage() {
				uni.showModal({
					title: '提示',
					content: '当前版本为1.0.0，已是最新版本！',
					success(res) {
						if (res.confirm) {
							// console.log('用户点击确定')
						} else if (res.cancel) {
							// console.log('用户点击取消')
						}
					}
				})
			},
			userInfoHandler(e) {
				uni.login({
					success: (login) => {
						if(!e.detail.userInfo) return;
						request({
							url: "/users/login",
							data: {
								code: login.code,
								userInfo: e.detail.userInfo
							},
							method: 'POST'
						}).then(res => {
							uni.setStorageSync('openid', res.data.openid);
							uni.setStorageSync('avatarUrl', e.detail.userInfo.avatarUrl);
							// uni.setStorageSync('token', res.data.token);
							this.loginFlag = true;
							// this.changeInfo({
							// 	userInfo: e.detail.userInfo
							// })
							this.getUser();
						})
					},
					fail: (err) => {
						console.log('拒绝', err)
					}
				})
			},
			getUser() {
				if (!uni.getStorageSync('openid')) return;
				request({
					url: "/users/user-one",
					data: {
						openid: uni.getStorageSync('openid'),
					},
					method: 'POST'
				}).then(res => {
					this.oUser = res.data;
					this.count = res.count;
					// console.log(res)
				})
			},
			toRegSheet() {
				uni.showActionSheet({
					itemList: ['发起任务', '查看发起任务列表'],
					success(res) {
						switch (res.tapIndex) {
							case 0:
								// uni.showModal({
								// })
								uni.navigateTo({
									url: '/pages/home/reg'
								});
								break;
							case 1:
								uni.navigateTo({
									url: '/pages/user/list?id=1'
								});
								break;
						}
					},
					fail(res) {
						console.log(res.errMsg)
					}
				})
			}
		},
		mounted() {
			if (uni.getStorageSync('openid')) {
				this.loginFlag = true;
			} else {
				this.loginFlag = false;
			}
		},
		onShow() {
			let _this = this;
			uni.getSetting({
				success: (e) => {
					if (e.authSetting["scope.userInfo"]) {
						_this.getUser();
					} else {
						uni.showToast({
							title: '验证已过期,请重新授权',
							icon: 'none',
							duration: 600
						})
					}
				}
			})
		}
	}
</script>

<style>
	.user-title {
		color: #000000;
		font-size: 36rpx !important;
		font-family: 'PingFang-SC-Bold';
		font-weight: bold;
	}

	.grid-danwei {
		color: #000000 !important;
		display: inline !important;
		margin-left: 10rpx;
	}
</style>
